<template>
  <div>

      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>课程管理</el-breadcrumb-item>
        <el-breadcrumb-item>直播管理</el-breadcrumb-item>
        <el-breadcrumb-item>直播数据</el-breadcrumb-item>
      </el-breadcrumb>

      <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">直播数据</h3>
      <p style="text-align: left;padding-bottom: 5px">数据总览</p>
    <el-row :gutter="12">
      <el-col :span="4">
      <el-card style="border-radius: 10%;background-color:lightgray;text-align: left">
        <p style="font-size: 14px;margin:0 0">直播间访问量：</p>
        <p style="font-size: 20px;font-weight: bolder;padding-left: 20px">1234</p>
      </el-card>
      </el-col>
      <el-col :span="4">
        <el-card style="border-radius: 10%;background-color:lightgray;text-align: left">
          <p style="font-size: 14px;margin:0 0">直播间浏览量：</p>
          <p style="font-size: 20px;font-weight: bolder;padding-left: 20px">1234</p>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card style="border-radius: 10%;background-color:lightgray;text-align: left">
          <p style="font-size: 14px;margin:0 0">累计观看人数：</p>
          <p style="font-size: 20px;font-weight: bolder;padding-left: 20px">1234</p>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card style="border-radius: 10%;background-color:lightgray;text-align: left">
          <p style="font-size: 14px;margin:0 0">累计观看人次：</p>
          <p style="font-size: 20px;font-weight: bolder;padding-left: 20px">1234</p>
        </el-card>
      </el-col><el-col :span="4">
      <el-card style="border-radius: 10%;background-color:lightgray;text-align: left">
        <p style="font-size: 14px;margin:0 0">人均观看时长：</p>
        <p style="font-size: 20px;font-weight: bolder;padding-left: 20px">1234</p>
      </el-card>
    </el-col>
    </el-row>

    <el-row :gutter="12" style="margin-top: 20px">
      <el-col :span="4">
        <el-card style="border-radius: 10%;background-color:lightgray;text-align: left">
          <p style="font-size: 14px;margin:0 0">点赞量：</p>
          <p style="font-size: 20px;font-weight: bolder;padding-left: 20px">1234</p>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card style="border-radius: 10%;background-color:lightgray;text-align: left">
          <p style="font-size: 14px;margin:0 0">评论数：</p>
          <p style="font-size: 20px;font-weight: bolder;padding-left: 20px">1234</p>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card style="border-radius: 10%;background-color:lightgray;text-align: left">
          <p style="font-size: 14px;margin:0 0">打赏人数：</p>
          <p style="font-size: 20px;font-weight: bolder;padding-left: 20px">1234</p>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card style="border-radius: 10%;background-color:lightgray;text-align: left">
          <p style="font-size: 14px;margin:0 0">打赏金额(元)：</p>
          <p style="font-size: 20px;font-weight: bolder;padding-left: 20px">1234</p>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
export default {
  data() {
    return {

    };
  },
  methods: {
    queryLiveDataByLiveId(){
      let url = "liveDateVo/queryLiveOnlineDateByDays";
      this.$axios.get(url,{
            params:{
              days:48
            }
          }
      ).then(res=>{
        if (res.data.code == 200){
          let liveOnlineDate=res.data.data;
          for(let i=0;i<16;i++){
            this.xData.push(liveOnlineDate[i].timeDate)
            this.yData.push(liveOnlineDate[i].onlineNum)
          }
          for(let j=16;j<32;j++){
            this.aData.push(liveOnlineDate[j].onlineNum)
          }
          for(let k=32;k<48;k++){
            this.bData.push(liveOnlineDate[k].onlineNum)
          }
          this.initEcharts();
        }else {
          this.$message({
            type:"error",
            message:res.data.msg,
            duration:1000
          })
        }
      });
    },

    reloadData() {

    }
  },
  created() {
    this.reloadData();
  }
};
</script>

<style scoped>

</style>